.find{display: flex; justify-content:  space-between;align-items: center;padding-block: 5px;position: sticky;
            top: 0;z-index: 900;background-color: white;
box-shadow: 3px 4px 14px 9px rgba(0, 0, 0, 0.1);
	margin-bottom: 30px;}
.find > div{display: flex;justify-content: center;width: 100%;margin-inline: 20px;height: 60px;padding: 5px;align-items: center;}
.find .buts{width:100%;max-width: 600px;display: flex;justify-content: center;box-shadow: -1px -1px 10px 0px rgba(0, 0, 0, 0.1);
border-radius: 20px;height: 40px;align-items: center;overflow: hidden;
}
.hidden{display: none;}




.find .input-box{position: relative;width: 100%;}
.find .sug{position: absolute;background: red;left: 0;right: 0;width: auto;top:5px;display: none;}
.find button i{color: white;}
.find .sel {width: min-content;height: 50px; display: flex;justify-content: center;align-items: center;}
.find .sel select{margin-inline: 10px;height: 90%;border: none;border: 1px solid #ddd;border-radius: 20px;
 appearance: none;outline:none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('../images/darrow.png') no-repeat right 10px center;
  background-size: 20px;
    padding-inline: 30px;



}
.find .sel select:focus {box-shadow: -1px -1px 10px 0px rgba(0, 0, 50, 0.2); outline: none;}



.find input{ font: inherit;padding-inline: 20px;color: #666;
    border: none;height: 20px;width: 100%;
    outline: none;
    background: none;}

.find button{border: none;border-radius: 10px;height: 90%;width: 40px;
    outline: none;padding-inline: 10px;transform: translateX(5px);
    transition: all 0.3s ;
    background: #1057b3;}
    /* find end and alldesign start */
    .find button:hover{width: 70px;transform: translateX(-3px);border-radius: 20px;}
     section.alldesign {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
            gap: 30px; /* Space between items */
            padding: 20px;
            background-color: #f8f8f8;
        }
        .find .buts:focus-within button{width: 60px;transform: translateX(-3px);border-radius: 20px;}
.find .buts:focus-within {border: 1px solid #ddf;}
        /* Each grid item (photo box) */
        .photo-box {

            position: relative;
            overflow: hidden;
            border-radius: 3px;
            box-shadow: 3px 4px 14px 9px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
            
        }
.photo-box::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
           background-color: #00000000;
          transition: background-color 0.3s;}

 .photo-box:hover::before {
            background-color: #00000033; /* Darker overlay on hover */
            z-index: 100;
        }
        /* On hover, slightly enlarge the box */



        .photo-box:hover {
/*            transform: scale(1.02);*/
        }

        /* Image styling */
        .photo-box img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.3s;
            aspect-ratio: 300/250;
        }

        /* Information container (name, category, description) */
       .photo-box .info {
            display: flex ;justify-content: space-around;position: absolute;bottom: 0;left: 0;right: 0;
            background-color: #fff;
            text-align: center;
        }

       
       .photo-box .info p {
            margin: 5px 0;
            font-size: 14px;
            color: #777;
        }

        /* Hover effect: Visit Site button in the center */
        .visit-button {
            position: absolute;
            top: 70%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 888;
            
        }
        .visit-button .vbutton {position: relative;
        background-color:  #0066ff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s ease;
            text-align: center;
            transition: all 0.3s;
            overflow: hidden;
            outline: none;
            
}
         .bubble {
            position: absolute;
            border-radius: 50%; /* Make it circular */
            background: rgba(255, 255, 255, 0.5); /* Light bubble color */
            transform: scale(0); /* Start scaled down */
            animation: bubble 0.4s linear forwards; /* Animation properties */
            pointer-events: none; /* Prevent mouse events on bubble */
        }

        @keyframes bubble {
            to {
                transform: scale(2); /* Scale up */
                opacity: 0; /* Fade out */
            }
        }
       
        /* Show button on hover */
        .photo-box:hover img{transform: scale(1.1);}
        .photo-box:hover .visit-button .vbutton {
            opacity: 1;
            
        }
        .photo-box:hover .visit-button{top: 50%;}
         .bubble {
            position: absolute;
            border-radius: 50%; /* Make it circular */
            background: rgba(255, 255, 255, 0.5); /* Light bubble color */
            transform: scale(0); /* Start scaled down */
            animation: bubble 0.6s linear forwards; /* Animation properties */
            pointer-events: none; /* Prevent mouse events on bubble */
        }

        @keyframes bubble {
            to {
                transform: scale(2); /* Scale up */
                opacity: 0; /* Fade out */
            }
        }




        @media (max-width: 900px) {
            .find {flex-direction: column;}
            .find .buts{margin-inline: 10px;}
            .find .sel select{width:40vw; padding-inline: 20px;}



        }